import { Layout, Menu } from "antd";
import {
  UserOutlined,
  LaptopOutlined,
  NotificationOutlined,
} from "@ant-design/icons";

import { HeartOutlined, HeartTwoTone } from "@ant-design/icons";

// ReactDOM.render(
//   <div className="icons-list">
//     <SmileTwoTone />

//     <CheckCircleTwoTone twoToneColor="#52c41a" />
//   </div>,
//   mountNode,
// );

const Sidebar = () => {
  const { SubMenu } = Menu;
  const { Sider } = Layout;
  return (
    <Sider className="site-layout-background" width={200}>
      <Menu
        mode="inline"
        defaultSelectedKeys={["1"]}
        defaultOpenKeys={["sub1"]}
        style={{ height: "100%" }}
      >
        <SubMenu key="sub1" icon={<UserOutlined />} title="8月">
          <Menu.Item icon={<HeartOutlined />} key="1">
            8.1 ~ 8.8
          </Menu.Item>
          <Menu.Item icon={<HeartOutlined />} key="2">
            8.1 ~ 8.8
          </Menu.Item>
          <Menu.Item icon={<HeartOutlined />} key="3">
            8.1 ~ 8.8
          </Menu.Item>
          <Menu.Item icon={<HeartOutlined />} key="4">
            8.1 ~ 8.8
          </Menu.Item>
        </SubMenu>
        <SubMenu key="sub2" icon={<LaptopOutlined />} title="7月">
          <Menu.Item icon={<HeartOutlined />} key="5">
            7.1 ~ 7.7
          </Menu.Item>
          <Menu.Item icon={<HeartOutlined />} key="6">
            7.1 ~ 7.7
          </Menu.Item>
          <Menu.Item icon={<HeartTwoTone twoToneColor="#52c41a" />} key="7">
            7.1 ~ 7.7
          </Menu.Item>
          <Menu.Item icon={<HeartTwoTone twoToneColor="#52c41a" />} key="8">
            7.1 ~ 7.7
          </Menu.Item>
        </SubMenu>
        <SubMenu key="sub3" icon={<NotificationOutlined />} title="6月">
          <Menu.Item icon={<HeartTwoTone twoToneColor="#52c41a" />} key="9">
            5.31 ~ 6.6
          </Menu.Item>
          <Menu.Item icon={<HeartTwoTone twoToneColor="#52c41a" />} key="10">
            5.31 ~ 6.6
          </Menu.Item>
          <Menu.Item icon={<HeartTwoTone twoToneColor="#52c41a" />} key="11">
            5.31 ~ 6.6
          </Menu.Item>
          <Menu.Item icon={<HeartTwoTone twoToneColor="#52c41a" />} key="12">
            5.31 ~ 6.6
          </Menu.Item>
        </SubMenu>
      </Menu>
    </Sider>
  );
};

export default Sidebar;
